<template>

  <NavBarCmp />

  <van-list v-model:loading="loading" loading-text="loading..." :finished="finished" finished-text="没有更多了"
    @load="onLoad">

    <div class="clip-item" v-for="feed in feeds" :key="feed.id" @click="gotoClipDetail(feed)">
      <img :src="feed.video.imgUrl" :alt="feed.title" class="clip-cover">

      <div class="container">
        <div class="title truncate-text">{{ feed.title }}</div>
        <div class="nickName-like">
          <div class="avatar-name">
            <img :src="feed.user.avatarurl" :alt="feed.user.nickName" class="avatar">
            <span class="nickName">{{ feed.user.nickName }}</span>
          </div>
          <div class="good-count">
            <van-icon name="good-job-o" size="20" />
            <span class="like">{{ feed.upCount }}</span>
          </div>

        </div>
      </div>

    </div>



  </van-list>




  <TabBarCmp />

</template>


<script setup>
import { fetchClip } from "@/api/index.js"
import { ref, onMounted, computed } from 'vue'

import { useStore } from "@/stores/index.js"
const store = useStore()

import { useRouter } from 'vue-router'
const router = useRouter()


const loading = ref(false)
const finished = ref(false)
const pageNum = ref(1)
const limit = ref(10)
const offset = computed(() => (pageNum.value - 1) * limit.value)


const feeds = ref([])

const hasMore = ref(false);
const isFetching = ref(false); // 添加一个标志位 isFetching，用来判断是否正在请求数据

onMounted(async () => {
  if (!isFetching.value) {
    isFetching.value = true;
    loading.value = true
    const response = await fetchClip(offset.value)

    hasMore.value = response.data.paging.hasMore
    if (response.data.feeds.length > 0) {
      feeds.value.push(...response.data.feeds)
    }
    loading.value = false
    isFetching.value = false
  }
  if (!hasMore.value) {
    console.log("没有小视频了");
    finished.value = true;
    return;
  }

});

// 加载更多
const onLoad = async () => {

  if (hasMore.value && !isFetching.value) {
    isFetching.value = true;
    pageNum.value += 1
    loading.value = true
    const response = await fetchClip(offset.value)

    hasMore.value = response.data.paging.hasMore
    if (response.data.feeds.length > 0) {
      feeds.value.push(...response.data.feeds)
    }
    loading.value = false
    isFetching.value = false
  }
  if (!hasMore.value) {
    console.log("没有小视频了");

    finished.value = true;
    return;
  }
};


const gotoClipDetail = (feed) => {

  if (feed) {
    store.setFeed(feed);
    router.push({ path: `/clip/${feed.id}` });
  } else {
    console.error('Invalid feed or feed.video is missing');
  }


};



</script>


<style scoped>
.truncate-text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.van-list {
  margin-top: 50.5px;
  display: flex;
  flex-wrap: wrap;
  /* 允许换行 */
  gap: 2px;
  /* 新增：统一设置行列间距 */
  padding: 5px;
  /* 新增：为容器增加内边距 */
}

.clip-item {
  cursor: pointer;
  position: relative;
  width: 50%;
  height: auto;
  /* flex: 0 0 calc(50%); */
  flex: 0 0 calc(50% - 1px);
  /* 宽度 = 50% - (gap 2px / 2) */
  margin: 0;
  /* 移除默认margin */
  box-sizing: border-box;
  background-color: #f0f0f0;
  text-align: left;
  line-height: 0;
  /* 新增：设置最小高度避免内容挤压 */
  min-height: 300px;
}




.clip-cover {
  position: relative;
  width: 100%;
  /* width: calc(100% - 2px); */
  /* 新增：留出间距 */
  /* margin: 1px; */
  /* 新增：微调图片间距 */
  height: 300px;
}

.container {
  position: absolute;
  bottom: 10px;
  left: 0;

  padding: 0 10px;
  height: auto;
}

.container .title {
  /* position: absolute;
  bottom: 40px;
  left: 10px; */
  font-size: 15px;
  color: #fff;
  line-height: 21px;
}

.container .nickName-like {
  /* position: absolute;
  bottom: 10px;
  left: 20px; */
  font-size: 13px;
  color: #fff;
  height: 20px;
  line-height: 20px;
  /* 确保高度一致 */
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
}

.avatar-name {
  display: flex;
  align-items: center;
  /* 垂直居中 */
  justify-content: flex-start;

}

.avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  opacity: 0.8;
  margin-right: 5px;
  /* 添加间距 */
}

.nickName {
  line-height: 20px;
  /* 确保高度一致 */
}

.good-count {
  display: flex;
  align-items: center;
  /* 垂直居中 */
  justify-content: flex-start;
}

.good-count .van-icon {
  margin-right: 5px;
  /* 添加间距 */
}
</style>
